<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侨乡非遗风物集</title>
    <link rel="stylesheet" href="../CSS/base.css">
    <link rel="stylesheet" href="../CSS/index.css">
</head>
<body>
    <!-- 头部容器 -->
    <div class="header">
        <!-- 背景图上覆盖的透明层 -->
        <div class="overlay"></div>
        
        <!-- 内容区域 -->
        <div class="header-content">
            <!-- 中间搜索栏 -->
            <div class="search-container">
                <input type="text" class="search-box" placeholder="搜索非遗项目...">
            </div>
            <!-- 右侧时间显示 -->
            <div class="time-display">
                <div class="date-line" id="currentDate">11月2日，星期日</div>
                <div class="lunar-date" id="lunarDate">农历乙巳年九月十二日</div>
            </div>
        </div>
    </div>
    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 悬浮导航框 -->
        <div class="floating-box">
            <a href="#" class="nav-item">首页</a>
            <a href="#" class="nav-item">指南</a>
            <a href="#" class="nav-item">文创</a>
        </div>
         <!-- 图片轮播容器 -->
        <div class="image-container">
             <!-- 8张轮播图片，使用A标签实现跳转 -->
            <a href="jiangmen_introduction.html" class="slide-link active">
                <div class="slide-image" style="background-image: url(../uploads/江门首页展示1.png);"></div>
            </a>
            <a href="jiangmen_introduction.html" class="slide-link">
                <div class="slide-image" style="background-image: url(../uploads/台山首页展示.png);"></div>
            </a>
            <a href="jiangmen_introduction.html" class="slide-link">
                <div class="slide-image" style="background-image: url(../uploads/开平首页展示.png);"></div>
            </a>
            <a href="jiangmen_introduction.html" class="slide-link">
                <div class="slide-image" style="background-image: url(../uploads/恩平首页展示.png);"></div>
            </a>
            <a href="jiangmen_introduction.html" class="slide-link">
                <div class="slide-image" style="background-image: url(../uploads/新会首页展示.png);"></div>
            </a>
            <a href="jiangmen_introduction.html" class="slide-link">
                <div class="slide-image" style="background-image: url(../uploads/江海首页展示.png);"></div>
            </a>
            <a href="jiangmen_introduction.html" class="slide-link">
                <div class="slide-image" style="background-image: url(../uploads/蓬江首页展示.png);"></div>
            </a>
            <a href="jiangmen_introduction.html" class="slide-link">
                <div class="slide-image" style="background-image: url(../uploads/鹤山首页展示.png);"></div>
            </a>
            
            <!-- 圆点指示器 -->
            <div class="dots-container">
                <div class="dot active" data-index="0"></div>
                <div class="dot" data-index="1"></div>
                <div class="dot" data-index="2"></div>
                <div class="dot" data-index="3"></div>
                <div class="dot" data-index="4"></div>
                <div class="dot" data-index="5"></div>
                <div class="dot" data-index="6"></div>
                <div class="dot" data-index="7"></div>
            </div>
        </div>
    </div>
    <script>
        // 更新时间显示
        function updateDateTime() {
            const now = new Date();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const weekday = weekdays[now.getDay()];
            
            document.getElementById('currentDate').textContent = `${month}月${day}日，${weekday}`;
        }
        
        // 初始化时间
        updateDateTime();
        
        // 每分钟更新一次时间
        setInterval(updateDateTime, 60000);

        // 图片轮播功能
        let currentIndex = 0;
        const slides = document.querySelectorAll('.slide-link');
        const dots = document.querySelectorAll('.dot');
        const totalSlides = slides.length;
        
        function showSlide(index) {
            // 隐藏所有图片
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            // 显示当前图片
            slides[index].classList.add('active');
            dots[index].classList.add('active');

            // 更新currentIndex
            currentIndex = index;
        }
        
        function nextSlide() {
            currentIndex = (currentIndex + 1) % totalSlides;
            showSlide(currentIndex);
        }
        
        // 每3秒自动切换
        setInterval(nextSlide, 3000);
        
        // 点击圆点切换图片
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentIndex = index;
                showSlide(currentIndex);
            });
        });
    </script>
</body>
</html>